<template>
  <div>
    <!-- template中，ref定义的模型数据，无需.value，因为他会自动解套 -->
    <p>count is {{ count }}</p>
    <p>
      <button @click="add">+2</button>
    </p>
    <p>{{ person }}</p>
    <p>
      <button @click="changePerson">change Person</button>
    </p>
    <p>
      {{ fruits }}
    </p>
    <p>
      <button @click="change">change</button>
    </p>
  </div>
</template>

<script setup>
// vue3处处皆函数

import { ref, reactive } from 'vue'

// ref 什么类型的模型数据都可以定义，简单类型、引用类型
// 通过ref定义的模型数据，在 script 中使用的时候，必须要通过.value 去使用，这是规定
const count = ref(0)
const person = ref({
  name: 'zhangsan',
  age: 20
})

// reactive只能定义引用类型数据，并且在script中用的时候，无需.value(它也没有.value)
const fruits = reactive(['香蕉', '西瓜', '苹果'])

const add = () => {
  count.value += 2
}

const changePerson = () => {
  person.value.name = '李四'
  person.value.age = 30
}

const change = () => {
  fruits[1] = '哈密瓜🍈'
}
</script>
